<template>
  <e-charts :options="options" @mouseover="clearData()" @mouseout="swiper()"/>
</template>

<script setup lang="ts">
import { GET } from '@/api'
import useSettingStore from "@/stores/setting";

const currentData = ref(0.00)
const options = ref({})
let timer:number

const props = defineProps({
  deviceId: {
    type: String,
    default: '',
    required: true
  }
})

onMounted(()=>{
  getData(1)
  swiper()
})

onBeforeUnmount(()=>{
  clearData()
})

watch(
    () => props.deviceId,
    (val: any) => {
      getData(1)
    }
)

function getData(type:number){
  GET("realTimeData", {deviceId: props.deviceId}).then(res => {
    let flag = true
    if (res.code === 200) {
      res.data.forEach(e => {
        if(e.dictValue === 8005){
          flag = false
          currentData.value = e.dataValue
        }
      })
      if (flag) {
        currentData.value = 0.00
      }
      nextTick(() => {
        if (type === 1){
          initOptions()
        } else {
          updateOptions()
        }
      })
    } else {
      Window.$message({
        message: res.msg,
        type: "warning",
      })
    }
  })
}

function swiper(){
  if (timer) {
    return
  }
  let looper = () => {
    getData(2)
  }
  timer = setInterval(looper, useSettingStore().echartsAutoTime);
}

function initOptions(){
  options.value = {
    title: {
      text: '单位：吨/小时',
      textStyle: {
        color: '#3de7c9',
      }

    },
    series: [
      {
        name: '煤流瞬时',
        type: 'gauge',
        center: ['50%', '55%'],
        radius:'100%',
        progress:{
          show: true,
          width: 25,
          roundCap: true,
          clip: true,
          itemStyle:{
            color: '#fcc01e'
          },
        },
        axisLabel:{
          distance: 30,
          color: '#87ff2a'
        },
        axisLine: {
          lineStyle: {
            width: 25,
            color: [
              [0.4, '#67e0e3'],
              [0.8, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        axisTick: {
          distance: 8,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        splitLine: {
          distance: 8,
          length: 18,
          lineStyle: {
            color: '#fff',
            width: 4
          }
        },
        detail: {
          valueAnimation: true,
          formatter: function (value) {
            return value.toFixed(2);
          },
          color: 'inherit'
        },
        data: [
          {
            value: currentData.value
          }
        ],
        max: 5000
      }
    ]
  }
}

function updateOptions(){
  nextTick(() => {
    options.value = {
      series: [
        {
          data: [
            {
              value: currentData.value,
            }
          ],
        }]
    }
  })
}

function clearData(){
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}
</script>

<style scoped lang="scss">

</style>